<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    :fullscreen="false"
    :append-to-body="true"
    :visible.sync="dialogFormVisible"
    width="600px"
  >
    <div class="form">
      <!-- <el-alert
        :closable="false"
        :title="`支持jpg、jpeg、png格式，单次可最多选择${limit}张图片，每张不可大于${size}M，如果大于${size}M会自动为您过滤`"
        type="info"
      ></el-alert>
      <br /> -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item :label="$t('common.account') /*'账号'*/">
          <el-input v-model="form.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('common.username') /*'用户名'*/"
          :required="true"
          prop="realname"
        >
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.iphone') /*'联系电话'*/">
          <el-input
            v-model="form.phone"
            :placeholder="$t('common.notRequire') /*'非必填'*/"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.email') /*'邮箱'*/">
          <el-input
            v-model="form.email"
            :placeholder="$t('common.notRequire') /*'非必填'*/"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
      style="position: relative; padding-right: 15px; text-align: right"
    >
      <el-button type="primary" @click="handleClose">
        {{ $t('common.cancel') /*'取消'*/ }}
      </el-button>
      <el-button
        :loading="loading"
        size="small"
        style="margin-left: 10px"
        type="success"
        @click="onSubmit('form')"
      >
        {{ $t('common.submit') /*'提交'*/ }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { setUserInfo } from '@/api/user'
  // import { mapState } from 'vuex'
  export default {
    name: 'VabUpload',
    props: {
      url: {
        type: String,
        default: '/upload',
        required: true,
      },
      name: {
        type: String,
        default: 'file',
        required: true,
      },
      limit: {
        type: Number,
        default: 50,
        required: true,
      },
      size: {
        type: Number,
        default: 1,
        required: true,
      },
      userinfo: {
        type: Object || Number || String,
        default: {},
        required: true,
      },
    },
    data() {
      return {
        form: {
          username: this.userinfo?.username || '',
          phone: this.userinfo?.phone || '',
          email: this.userinfo?.email || '',
          realname: this.userinfo?.realname || '',
          user_id: this.userinfo?.user_id || '',
        },
        show: false,
        loading: false,
        dialogVisible: false,
        dialogImageUrl: '',
        action: 'https://vab-unicloud-3a9da9.service.tcloudbase.com/upload',
        headers: {},
        fileList: [],
        picture: 'picture',
        imgNum: 0,
        imgSuccessNum: 0,
        imgErrorNum: 0,
        typeList: null,
        title: this.$t('user.personInformation') /*'个人资料'*/,
        dialogFormVisible: false,
        data: {},
        rules: {
          realname: [
            {
              required: true,
              message: this.$t('common.pleaseInputUserName') /*'请输入用户名'*/,
              trigger: 'blur',
            },
          ],
        },
      }
    },
    computed: {
      // ...mapState({
      //   userinfo: (state) => state.user.userinfo,
      // }),
      percentage() {
        if (this.allImgNum == 0) return 0
        return this.$baseLodash.round(this.imgNum / this.allImgNum, 2) * 100
      },
    },
    created() {
      console.log(this.userinfo)
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          console.log(valid, '修改用户信息', formName)
          if (valid) {
            // alert('submit!')
            await setUserInfo(this.form)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      submitUpload() {
        // this.$refs.upload.submit()
      },
      handleProgress(event, file, fileList) {
        this.loading = true
        this.show = true
      },
      handleChange(file, fileList) {
        if (file.size > 1048576 * this.size) {
          fileList.map((item, index) => {
            if (item === file) {
              fileList.splice(index, 1)
            }
          })
          this.fileList = fileList
        } else {
          this.allImgNum = fileList.length
        }
      },
      handleSuccess(response, file, fileList) {
        this.imgNum = this.imgNum + 1
        this.imgSuccessNum = this.imgSuccessNum + 1
        if (fileList.length === this.imgNum) {
          setTimeout(() => {
            this.$baseMessage(
              `上传完成! 共上传${fileList.length}张图片`,
              'success'
            )
          }, 1000)
        }

        setTimeout(() => {
          this.loading = false
          this.show = false
        }, 1000)
      },
      handleError(err, file, fileList) {
        this.imgNum = this.imgNum + 1
        this.imgErrorNum = this.imgErrorNum + 1
        this.$baseMessage(
          `文件[${file.raw.name}]上传失败,文件大小为${this.$baseLodash.round(
            file.raw.size / 1024,
            0
          )}KB`,
          'error'
        )
        setTimeout(() => {
          this.loading = false
          this.show = false
        }, 1000)
      },
      handleRemove(file, fileList) {
        this.imgNum = this.imgNum - 1
        this.allNum = this.allNum - 1
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleExceed(files, fileList) {
        this.$baseMessage(
          `当前限制选择 ${this.limit} 个文件，本次选择了
               ${files.length}
               个文件`,
          'error'
        )
      },
      handleShow(data) {
        this.title = this.$t('user.personInformation') /*'个人资料'*/
        this.data = data
        this.dialogFormVisible = true
      },
      handleClose() {
        this.fileList = []
        this.picture = 'picture'
        this.allImgNum = 0
        this.imgNum = 0
        this.imgSuccessNum = 0
        this.imgErrorNum = 0
        /* if ("development" === process.env.NODE_ENV) {
            this.api = process.env.VUE_APP_BASE_API;
          } else {
            this.api = `${window.location.protocol}//${window.location.host}`;
          }

          this.action = this.api + this.url; */
        this.dialogFormVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .upload {
    height: 500px;

    .upload-content {
      .el-upload__tip {
        display: block;
        height: 30px;
        line-height: 30px;
      }

      ::v-deep {
        .el-upload--picture-card {
          width: 128px;
          height: 128px;
          margin: 3px 8px 8px 8px;
          border: 2px dashed #c0ccda;
        }

        .el-upload-list--picture {
          margin-bottom: 20px;
        }

        .el-upload-list--picture-card {
          .el-upload-list__item {
            width: 128px;
            height: 128px;
            margin: 3px 8px 8px 8px;
          }
        }
      }
    }
  }
</style>
